<template>
	<div class="base-map-wrapper" v-show="visible">
		<ul class="base-map-box">
			<li
				:id="'base-map-' + layerItem.id"
				class="base-map"
				v-for="layerItem in layers"
				:key="layerItem.id"
				@click="updateLayers(layerItem)"
			>
				<img :src="layerItem.bgImage" class="base-map-title" />
				<div class="base-map-name">{{ layerItem.name }}</div>
			</li>
		</ul>
	</div>
</template>

<script>
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'

import baiduImg from '@/assets/img/layer-manager/baidu.png'
import googleImg from '@/assets/img/layer-manager/google.png'

import { mapState } from 'pinia'
import { useMapStore } from '../../stores/mapStore'

export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		layerList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			layers: [
				{
					id: 1,
					name: '谷歌地图',
					layer: new TileLayer({
						source: new XYZ({
							url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}'
						}),
						visible: true,
						zIndex: -1
					}),
					bgImage: baiduImg
				},
				{
					id: 2,
					name: '谷歌影像',
					layer: new TileLayer({
						source: new XYZ({
							url: 'https://mt1.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}'
						}),
						visible: false,
						zIndex: -1
					}),
					bgImage: googleImg
				}
			],
			selectLayer: null
		}
	},
	computed: {
		...mapState(useMapStore, ['map'])
	},
	watch: {
		map(map) {
			console.log(map)
			// const layerObj = this.layers.filter((layerItem) => (layerItem.enable))[0]
			// map.addLayer(layerObj.layer)
			this.layers.forEach((layerItem) => {
				map.addLayer(layerItem.layer)
				if (layerItem.layer.getVisible()) {
					this.selectLayer = layerItem.layer
					document
						.querySelector('#base-map-' + layerItem.id)
						.classList.add('select')
				}
			})
		}
	},
	mounted() {},
	methods: {
		updateLayers(layerItem) {
			this.selectLayer.setVisible(false)
			layerItem.layer.setVisible(true)
			this.selectLayer = layerItem.layer
			document.querySelector('.base-map.select').classList.remove('select')
			document
				.querySelector(`#base-map-${layerItem.id}`)
				.classList.add('select')
		}
	}
}
</script>

<style scoped lang="scss">
.base-map-wrapper {
	background-color: #ffffff;
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	z-index: 999;
	.base-map-box {
		display: flex;
		list-style-type: none;
		margin: 0;
		padding: 0.5em;
		padding-right: 0;
		color: #fff;
		box-sizing: border-box;
		li {
			position: relative;
			width: 100px;
			height: 75px;
			margin-right: 10px;
			font-size: 12px;
			border-radius: 2px;
			border: 1px solid #00000000;
			box-sizing: border-box;
			cursor: pointer;
			&:hover,
			&.select {
				border: 1px solid #4786f7;
			}
			.base-map-name {
				position: absolute;
				right: 0;
				bottom: 0;
				background: #ffffff;
				padding: 3px;
				color: #000;
				border-top-left-radius: 4px;
			}
			.base-map-title {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
